

  .iconfont{
      font-family: iconfont;
  }
  
  .container{
      max-width: 1200px;
      text-align: center;
      margin: 0 auto;
  }
  
  /*banner*/
  .banner{
      position: relative;
      width: 100%;
      height: 580px;
      text-align: center;
      overflow: hidden;
  }
  .boxs{
      width: 5760px;
      position: absolute;
      top: 0;
  }
  .box{
      float: left;
      width: 1920px;
  }
  .pics{
      width: 1920px;
      height: 580px;
  }
  .banner ul{
      position: absolute;
      top: 530px;
      width: 100%;
  }
  .banner ul>li{
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-left: 20px;
      border-radius: 50%;
      background-color: #6cf;
  }
  .banner>ul>li:first-of-type{
      margin-left: 0;
  }
  .banner ul>li:hover{
      background-color: #39c;
  }
  /*mouth*/
  .mouths{
      margin: 30px 0 50px;
      height: 120px;
      text-align: center;
  }
  .mouth1{
      display: inline-block;
      overflow: hidden;
  
      margin:0 20px;
      padding: 20px 30px;
      height: 70px;
      width: 50px;
      border-radius: 50%;
  
      font-family: SimHei;
      text-align: center;
      font-size: 36px;
  
      color: #fff;
      background-color: #7ecef4;
  }
  
  .mouth2{
      display: inline-block;
      overflow: hidden;
  
      margin:0 20px;
      padding: 20px 30px;
      height: 70px;
      width: 50px;
      border-radius: 50%;
      transform:scale(.6,.6);
  
      font-family: SimHei;
      text-align: center;
      font-size: 36px;
  
      color: #fff;
      background-color: #7ecef4;
  }
  .mouth3{
      display: inline-block;
      overflow: hidden;
  
      margin:0 20px;
      padding: 20px 30px;
      height: 70px;
      width: 50px;
      border-radius: 50%;
      transform:scale(.4,.4);
  
      font-family: SimHei;
      text-align: center;
      font-size: 36px;
  
      color: #fff;
      background-color: #7ecef4;
  }
  .mouth4{
      display: inline-block;
      overflow: hidden;
  
      margin:0 20px;
      padding: 20px 30px;
      height: 70px;
      width: 50px;
      border-radius: 50%;
      transform:scale(.2,.2);
  
      font-family: SimHei;
      text-align: center;
      font-size: 36px;
  
      color: #fff;
      background-color: #7ecef4;
  }
  .mouth2:hover{
      color: #cbebfb;
      background-color: #00a0e9;
      transform:scale(.7,.7);
  }
  .mouth3:hover{
      color: #cbebfb;
      background-color: #00a0e9;
      transform:scale(.7,.7);
  }
  .mouth4:hover{
      color: #cbebfb;
      background-color: #00a0e9;
      transform:scale(.7,.7);
  }
  /*news*/
  .news{
      height: 784px;
      padding-top: 70px;
      padding-bottom: 90px;
      background-color: #d9f1fc;
  }
  .news>.container{
      position: relative;
  }
  /*新闻部分introduce*/
  .introduce1{
      position: absolute;
      top: -102px;
      width: 360px;
      height: 64px;
      padding-left: 450px;
      padding-right: 250px;
  
      text-align: center;
      background-color: #00a0e9;
  }
  .introduce1::before{
      content: "";
      position: absolute;
      top: 0;
      left: -600px;
      overflow: hidden;
      width: 600px;
      height: 64px;
      background-color: #00a0e9;
  }
  .introduce1::after{
      content: "";
      position: absolute;
      top: 0;
      right: -140px;
      height: 0;
      width: 0;
  
      border-bottom: transparent 32px solid;
      border-top: #00a0e9 32px solid;
      border-left: #00a0e9 70px solid;
      border-right: transparent 70px solid;
  }
  .introduce1 h1{
      margin:5px 34px;
      text-align: center;
      font-size: 24px;
      color: #fff;
  }
  .introduce1 h1::before{
      content: "";
      display: inline-block;
      position: absolute;
      top: 20px;
      left: 300px;
      width: 216px;
      height: 0px;
      border: 2px #fff solid;
  }
  .introduce1 h1::after{
      content: "";
      display: inline-block;
      position: absolute;
      top: 20px;
      left: 750px;
      width: 216px;
      height: 0px;
      border: 2px #fff solid;
  }
  .introduce1 h2{
      margin-left: 80px;
      margin-right: 80px;
      padding: 2px;
      border:#fff 2px solid;
      font-size: 16px;
      color: #fff
  }
  /*新闻内容*/
  .new1{
      float: left;
      position: relative;
      height: 520px;
      width: 596px;
      background-color: #7ecef4;
      overflow: hidden;
  }
  .new1 img{
      width: 100%;
      height: 100%;
  }
  .new1 img:hover{
      transform-origin:50% 50%;
      transform: scale(1.2,1.2);
      transition-duration: 1s;
  }
  .map1{
      position: absolute;
      top: 300px;
      left: 0;
      height: 140px;
      width: 556px;
      padding: 60px 20px 20px;
      color: #fff;
      opacity: 0;
      transition: opacity .5s;
      background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));
  }
  .map1 h3{
      font-size: 30px;
      letter-spacing: 4px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
  }
  .map1 p{
      text-align: left;
      padding: 10px;
      height: 55px;
      font-size: 15px;
      text-indent: 30px;
      letter-spacing: 1px;
      line-height: 23px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
  }
  .new1:hover>.map1{
      opacity: 1;
  }
  .map1:hover{
      opacity: 1;
  }
  .new{
      float: left;
      position: relative;
      height: 260px;
      width: 298px;
      background-color: #6cf;
      overflow: hidden;
  }
  .new img{
      width: 100%;
      height: 100%;
  }
  .new img:hover{
      transform-origin:50% 50%;
      transform: scale(1.2,1.2);
      transition-duration: 1s;
  }
  .map{
      position: absolute;
      top: 150px;
      left: 0;
      height: 70px;
      width: 280px;
      padding: 30px 10px 10px;
      color: #fff;
      opacity: 0;
      transition: opacity .5s;
      background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));
  }
  .map h3{
      font-size: 15px;
      letter-spacing: 2px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
  }
  .map p{
      text-align: left;
      padding: 5px;
      height: 30px;
      font-size: 12px;
      text-indent: 24px;
      letter-spacing: 1px;
      line-height: 20px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  .new:hover .map{
      opacity: 1;
  }
  .map:hover{
      opacity: 1;
  }
  .new0{
      float: left;
      height: 260px;
      width: 298px;
      background-color: #45553d;
      overflow: hidden;
  }
  .new0 p{
      color: #fff;
      font-size: 30px;
      margin-top:120px;
  }
  .new0:hover p{
      color: #999;
  }
  /*话题*/
  .introduce2{
      position: relative;
      margin:104px auto 84px auto;
  
      border-bottom: solid #00a0e9 4px;
      border-top: solid #00a0e9 4px;
  
      width: 60%;
      height: 72px;
  
      padding-right: 170px;
      padding-left: 170px;
  }
  .introduce2::before{
      content: "";
      position: absolute;
      top: -4px;
      left: -104px;
      width: 0;
      height: 0;
      border-top: 36px solid #00a0e9;
      border-bottom: 36px solid #f0f2f5;
      border-right: 56px solid #00a0e9;
      border-left: 56px solid #f0f2f5;
  }
  .introduce2::after{
      content: "";
      display: inline-block;
      position: absolute;
      overflow: hidden;
      top: -4px;
      right: -400px;
      border-top: 4px solid #00a0e9;
      border-bottom: 4px solid #00a0e9;
      height: 72px;
      width: 400px;
  }
  
  .introduce2 h1{
      position: relative;
      width:300px;
      margin:8px 34px;
      text-align: center;
      font-size: 24px;
      color: #00a0e9;
  }
  .introduce2 h1::before{
      content: "";
      display: inline-block;
      position: absolute;
      top: 16px;
      left: 300px;
      width: 216px;
      height: 0px;
      border: 2px #00a0e9 solid;
  }
  .introduce2 h1::after{
      content: "";
      display: inline-block;
      position: absolute;
      top: 16px;
      left: -220px;
      width: 216px;
      height: 0px;
      border: 2px #00a0e9 solid;
  }
  .introduce2 h2{
      margin-left: 80px;
      margin-right: 80px;
      padding: 2px;
      border:none;
      font-size: 16px;
      color: #00a0e9;
  }
  .introduce2 h2::before{
      content: "";
      position: absolute;
      top: 0;
      left: -88px;
      width: 0;
      height: 0;
      border-top: 32px solid #f0f2f5;
      border-bottom: 32px solid transparent;
      border-right: 48px solid #f0f2f5;
      border-left: 48px solid transparent;
  }
  /*话题内容*/
  .topic{
      position: relative;
      margin-bottom: 54px;
      height: 244px;
      background-color: #d9f1fc;
  }
  .topic:hover{
      background-color: #a2dffb;
  }
  .left{
      float: left;
      width: 410px;
      height: 244px;
      margin-left: 90px;
  }
  .left:hover{
      transform-origin:50% 50%;
      transform: scale(1.2,1.2);
      transition-duration: 1s;
  }
  .right{
      float: right;
      width: 410px;
      height: 244px;
      margin-right: 90px;
  }
  .right:hover{
      transform-origin:50% 50%;
      transform: scale(1.2,1.2);
      transition-duration: 1s;
  }
  .date1{
      display: inline-block;
      position: absolute;
      top: 85px;
      left: 466px;
      height: 60px;
      width: 60px;
      border: 4px solid #00a0e9;
  }
  .date1>li:nth-of-type(1){
      position: absolute;
      top: 14px;
      left: 4px;
      font-family: adobeHeitiStd;
      font-size: 20px;
      color: #00a0e9;
  }
  .date1>li:nth-of-type(2){
      position: absolute;
      top: 11px;
      left: 16px;
      font-family: adobeHeitiStd;
      font-size: 36px;
      color: #00a0e9;
  }
  .date1>li:nth-of-type(3){
      position: absolute;
      top: 26px;
      left: 32px;
      font-family: adobeHeitiStd;
      font-size: 20px;
      color: #00a0e9;
  }
  .date2{
      display: inline-block;
      position: absolute;
      top: 85px;
      right: 466px;
      height: 60px;
      width: 60px;
      border: 4px solid #00a0e9;
  }
  .date2>li:nth-of-type(1){
      position: absolute;
      top: 14px;
      left: 4px;
      font-family: adobeHeitiStd;
      font-size: 20px;
      color: #00a0e9;
  }
  .date2>li:nth-of-type(2){
      position: absolute;
      top: 11px;
      left: 16px;
      font-family: adobeHeitiStd;
      font-size: 36px;
      color: #00a0e9;
  }
  .date2>li:nth-of-type(3){
      position: absolute;
      top: 26px;
      left: 32px;
      font-family: adobeHeitiStd;
      font-size: 20px;
      color: #00a0e9;
  }
  .con{
      display: inline-block;
      position: relative;
      margin: 50px 60px 0;
      width: 580px;
      height: 190px;
      font-family: adobeHeitiStd;
      color: #606060;
      text-align: left;
  }
  .con>h3{
      font-size: 20px;
      font-weight: bolder;
      line-height: 26px;
  }
  .con>h3>a{
      color: #606060;
      cursor: pointer;
  }
  .con>p{
      height: 66px;
      margin-top: 5px;
  
      font-size: 20px;
      line-height: 22px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
  }
  .con>ul>li:nth-of-type(1){
      position: absolute;
      left: 122px;
      top: 158px;
  
      font-size: 20px;
  }
  .con>ul>li:nth-of-type(1):hover{
      color: #111;
      cursor:pointer;
  }
  .con>ul>li:nth-of-type(2){
      position: absolute;
      left: 320px;
      top: 158px;
  
      font-size: 20px;
  }
  .con>ul>li:nth-of-type(2)>a{
      color: #606060;
  }
  .con>ul>li:nth-of-type(2)>a:hover{
      color: #111;
      cursor: pointer;
  }
  .con>ul>li:nth-of-type(3){
      position: absolute;
      left: 500px;
      top: 158px;
  
      font-size: 20px;
  }
  .con>ul>li:nth-of-type(3)>a{
      color: #606060;
  }
  .con>ul>li:nth-of-type(3)>a:hover{
      color: #111;
      cursor: pointer;
  }
  .con>ul>li:nth-of-type(4){
      position: absolute;
      width: 100px;
      left: 450px;
      top: 0;
  
      font-size: 16px;
  }
  .con>ul>li:nth-of-type(4)>a{
      color: #606060;
  }
  .con>ul>li:nth-of-type(4):hover{
      color: #111;
  }
  .more>a{
      display: inline-block;
      text-align: right;
      margin: 0 0 30px;
      width: 100%;
      font-family: adobeHeitiStd;
      font-size: 20px;
      color: #9a9a9a;
  }
  .more>a:hover{
      color: #867ef4;
  }
  /*footer*/
  .footer{
      padding-top:24px;
      padding-bottom: 20px;
      background-color: #7ecef4;
  }
  .footer h1{
      padding-bottom: 15px;
      font-size: 18px;
      font-family: SimHei;
      text-align: left;
      letter-spacing: 4px;
      color: #fff;
  }
  .parts{
      display: inline-block;
      position: relative;
      width: 230px;
      margin-left: 65px;
  }
  .parts:last-of-type{
      width: 300px;
  }
  .parts h2{
      display: inline-block;
      width: 220px;
      padding: 5px;
  
      font-size: 24px;
      font-family: FangSong;
      text-align: left;
      color: #fff;
  }
  .parts:last-of-type h2{
      width: 280px;
  }
  .parts p{
      display: inline-block;
      padding: 5px;
      width: 100px;
  
      font-size: 18px;
      text-align: left;
      font-family: FangSong;
      color: #fff;
  }
  .parts:last-of-type p{
      width: 130px;
  }


  .student-card {
      display: inline-block;
      width: 40%;
      height: 200px;

      margin-bottom: 50px;

      position: relative;

      background-color: #bbb;

      transition: all .3s;

      cursor: pointer;
      user-select: none;
  }

  .student-card:hover {
    transform:scale(1.1,1.1);
    background-color: #bbe7fc;
  }

  .student-card:hover a {
    color: #000;
  }


  .student-card:nth-of-type(2n) {
    margin-left: 5%;
}

  .student-card img {
      width: 150px;
      height: 170px;

      position: absolute;
      top:15px;
      left:20px;
  }

  .student-card li {
    font-size: 15px;
    color: #666;
    text-align: left;
    line-height: 20px;
}

  .student-card li:first-of-type {
      position: absolute;
      top: 20px;
      left:200px;

      font-size: 20px;
      color: #000;
  }

  .student-card li:nth-of-type(2){
    position: absolute;
    top: 60px;
    left:200px;
  }

  .student-card li:nth-of-type(3){
    position: absolute;
    top: 60px;
    left:360px;
  }

  .student-card li:nth-of-type(4){
    position: absolute;
    top: 80px;
    left:200px;
  }

  .student-card li:nth-of-type(5){
    position: absolute;
    top: 100px;
    left:200px;
  }

  .student-card li:nth-of-type(6){
    position: absolute;
    top: 120px;
    left:200px;
  }

  .student-card li:nth-of-type(7){
    position: absolute;
    top: 160px;
    left:200px;
  }

  .pass {
    background-color: #bbe7fc;
  }

  .pass:hover {
    background-color: #65c5f2;
  }

  .pass li:nth-of-type(7){
      color: #00a0e9 !important;
  }

  .pass {

  }

  .student-card a {
      position: absolute;
      bottom: 15px;
      right:20px;

      font-size: 10px;
      color: #777;
  }


  /* 响应式设置 */
  @media (min-width: 0px) and (max-width: 1201px) {
      .mouth{
          margin: 5px;
      }
      .introduce1{
          padding-left: 250px;
      }
      .introduce1>h1:before{
          left: 100px;
      }
      .introduce1>h1:after{
          left: 550px;
      }
      .news{
          height: 1084px;
          padding-left: 45px;
      }
      .introduce2:after{
          width: 300px;
          right: -300px;
      }
      .left{
          margin-left: 0;
      }
      .right{
          margin-right: 0;
      }
      .date1{
          left: 376px;
      }
      .date2{
          right: 376px;
      }
      .con{
          margin: 26px 0;
          width: 560px;
      }
      .con>ul>li:nth-of-type(3){
          left: 490px;
      }
      .con>ul>li:nth-of-type(4){
          left: 470px;
      }
  }
  @media (min-width: 768px) and (max-width: 990px) {
      .mouth{
          width: 26px;
          height: 46px;
          font-size: 20px;
      }
      .introduce1{
          padding-left: 50px;
          padding-right: 150px;
      }
      .introduce1>h1:before{
          left: -100px;
      }
      .introduce1>h1:after{
          left: 350px;
      }
      .news{
          padding-left: 90px;
          height: 1578px;
      }
      .introduce2:after{
          width: 150px;
          right: -150px;
      }
      .left{
          width: 300px;
      }
      .right{
          width: 300px;
      }
      .date1{
          left: 270px;
      }
      .date2{
          right: 270px;
      }
      .con{
          width: 468px;
      }
      .con>ul>li:nth-of-type(1){
          left: 10px;
      }
      .con>ul>li:nth-of-type(2){
          left: 215px;
      }
      .con>ul>li:nth-of-type(3){
          left: 400px;
      }
      .con>ul>li:nth-of-type(4){
          left: 380px;
      }
  }
  